<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>search user</title>
<style type="text/css">
.userListTable {
	width:640px;
	overflow:hidden;
	font-size:14px;
}
.searchUserNickname{
	font-size:16px;
	font-weight:bold;
	color:blue;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/selectutil.js"></script>
<script type="text/javascript">
function Search(){
	this.searchType="user";
	this.articleSearchUrl="/wizard/search/article.html";
	this.userSearchUrl="/wizard/search/user.html";
	this.userRefineSearchUrl="/wizard/search/user/refine.html";
	this.searchArticle=function(){
		var articleSearchKey=document.getElementById("articleSearchKey").value;
		if(articleSearchKey&&articleSearchKey!=""){
			var url=this.articleSearchUrl;
			var data="query="+articleSearchKey;
			$.ajax({
				url: url,
				data:data,
				type : "POST",
				dataType:"json",
				contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				success : function(msg){
					alert(msg.data.length);
				}
			});
		}
	};
	this.searchUser=function(){
		var userSearchKey=document.getElementById("searchKey").value;
		if(userSearchKey&&userSearchKey!=""){
			var url=this.userSearchUrl;
			var data="query="+userSearchKey;
			var procUserData=this.procUserData;
			document.getElementById("searchUserDiv").innerHTML="";
			$.ajax({
				url: url,
				data:data,
				type : "POST",
				dataType:"json",
				contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				success : function(msg){
					procUserData(msg.data);
				}
			});
		}
	};
	this.refineSearchUser=function(){
		var userSearchKey=document.getElementById("searchKey").value;
		if(userSearchKey&&userSearchKey!=""){
			var url=this.userRefineSearchUrl;
			var data="query="+userSearchKey;
			var sex=document.getElementById("sex").value;
			data+="&sex="+sex;
			var provinceSelect=document.getElementById("province");
			var province=null;
			if(provinceSelect.selectedIndex!=0){
			 province=provinceSelect.options[provinceSelect.selectedIndex].text;
			}
			data+="&province="+province;
			var citySelect=document.getElementById("city");
			var city=null;
			if(citySelect.selectedIndex!=0){
			var city=citySelect.options[citySelect.selectedIndex].text;
			}
			data+="&city="+city;
			var age=document.getElementById("age").value;
			//alert(age);
			
			if(age==""){
				data+="&lowAge=&upAge=";
			}else if(age=="1"){
				data+="&lowAge=0&upAge=15";
			}else if(age=="2"){
				data+="&lowAge=15&upAge=20";
			}else if(age=="3"){
				data+="&lowAge=20&upAge=25";
			}else if(age=="4"){
				data+="&lowAge=25&upAge=30";
			}else if(age=="5"){
				data+="&lowAge=30&upAge=40";
			}else{
				data+="&lowAge=40&upAge=200";
			}
			var graduateSchool=document.getElementById("graduateSchool").value;
			data+="&graduateSchool="+graduateSchool;
			var procUserData=this.procUserData;
			alert(data);
			document.getElementById("searchUserDiv").innerHTML="";
			$.ajax({
				url: url,
				data:data,
				type : "POST",
				dataType:"json",
				contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				success : function(msg){
					procUserData(msg.data);
				}
			});
		}
	};
	this.procUserData=function(users){
		var searchUser=document.getElementById("searchUserDiv");
		for(var i=0;i<users.length;i++){
			var user=users[i];
			var innerHTML="";
			innerHTML+="<table class=\"userListTable\">";
			innerHTML+="<tr><td width=\"80px\" rowspan=\"5\"><img src=\"http://localhost:8080/skyline/image/"+user.portrait+"\"></td>";
			innerHTML+="<td align=\"right\">昵称:</td><td><font class=\"searchUserNickname\">"+user.nickname+"</font></td></tr>";
			innerHTML+="<td align=\"right\">真实姓名:</td><td>"+user.name+"</td></tr>";
			innerHTML+="<td align=\"right\">E-mail:</td><td>"+user.email+"</td></tr>";
			innerHTML+="<td align=\"right\">来自:</td><td>"+user.province+" "+user.city+"</td></tr>";
			innerHTML+="<td align=\"right\">毕业学校:</td><td>"+user.graduateSchool+"</td></tr></table>";
			searchUser.innerHTML+=innerHTML;
		}
	};
	this.getSubSites=function(selectId,siteId){
		var url="/skyline/site/getsubsites.html";
		var data="siteId="+siteId;
		var objSelect=document.getElementById(selectId);
		$.ajax({
			url: url,
			data:data,
			type : "POST",
			dataType:"json",
			contentType: "application/x-www-form-urlencoded; charset=utf-8", 
			success : function(msg){
				//var varItem = new Option("", "");
				//objSelect.options.add(varItem);
				for(var i=0;i<msg.length;i++){
					var site=msg[i];
					var varItem = new Option(site.name, site.id);
					objSelect.options.add(varItem);
				}
			}
		});
	}
	this.getCity=function(provinceSelectId,citySelectId){
		var provinceSelect=document.getElementById(provinceSelectId);
		var citySelect=document.getElementById(citySelectId);
		citySelect.options.length = 0;
		//alert(provinceSelect.options[provinceSelect.selectedIndex].text);
		var varItem = new Option("地区", "");
		citySelect.options.add(varItem);
		this.getSubSites(citySelectId,provinceSelect.value);
	}
	this.checkGraduateSchool=function(){
		var graduateSchool=document.getElementById("graduateSchool");
		//alert(graduateSchool.value);
		if(graduateSchool.value=="毕业学校"){
			graduateSchool.value="";
		}else if(graduateSchool.value==""){
			graduateSchool.value="毕业学校";
		}
	}
}
var search=new Search();
</script>
</head>
<body onload="search.getSubSites('province','001000000')">
<input type="text" name="searchKey" id="searchKey"> <input type="button" onclick="search.searchUser()" value="搜索">
<div id="searchResultDiv">
<div id="searchRefine">
<select id="sex" name="sex">
	<option value="">性别</option>
	<option value="MALE">男</option>
	<option value="FEMALE">女</option>
</select>&nbsp;
<select id="province" name="province" onchange="search.getCity('province','city')">
<option value="">省份</option>
</select>&nbsp;
<select id="city" name="city" >
<option value="">地区</option>
</select>&nbsp;
<select id="age" name="age">
<option value="">年龄</option>
<option value="1">小于15岁</option>
<option value="2">15-20岁</option>
<option value="3">20-25岁</option>
<option value="4">25-30岁</option>
<option value="5">30-40岁</option>
<option value="6">40岁以上</option>
</select>&nbsp;
<input id="graduateSchool" name="graduateSchool" type="text" size="16" value="毕业学校" onclick="search.checkGraduateSchool()" onblur="search.checkGraduateSchool()">
<input type="button" value="筛选" onclick="search.refineSearchUser()">
</div>
<div id="searchUserDiv">
</div>
</div>
</body>
</html>